<template>
    <div class="app-right">
        <div class="hot">
            <div class="title">
                <p>热门推荐</p>
            </div>
            <div class="data">
                <div v-for="(item, i) in list" :key="i" class="item">
                    <NuxtLink :to="{ name: 'post-id', params: { id: item.id } }">
                        <div class="cover">
                            <ImageLoading v-if="item.cover" class="cover" :url="item.cover" />
                            <ImageLoading v-else class="cover" :url="randomImgs.baseURL + i" />
                            <div class="overlay" />
                        </div>
                    </NuxtLink>
                    <div class="info">
                        <NuxtLink :to="{ name: 'post-id', params: { id: item.id } }">
                            <h3>{{ item.title }}</h3>
                        </NuxtLink>
                        <div class="time">
                            <span>{{ item.articleCount.looks }}次围观</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>© 2024 usuuu.com</p>
            <a href="https://beian.miit.gov.cn" target="_blank">豫ICP备18005747号-1</a>
        </div>
    </div>
</template>
<script setup lang="ts">
import './app.less'

/**
 * 热门排行榜
 */
const { data } = await articleHotsApi()
const list = computed(() => data.value?.data?.list ?? [] as ArticleVo[])
</script>